@extends('backstage.layout.master')
@section('title', '添加主题')
@section('style')
        <!-- page specific plugin styles -->
<link rel="stylesheet" href="assets/css/jquery-ui-1.10.3.custom.min.css"/>
<link rel="stylesheet" href="assets/css/chosen.css"/>
<link rel="stylesheet" href="assets/css/datepicker.css"/>
<link rel="stylesheet" href="assets/css/bootstrap-timepicker.css"/>
<link rel="stylesheet" href="assets/css/daterangepicker.css"/>
<link rel="stylesheet" href="assets/css/colorpicker.css"/>
@stop
@section('content')
    <div class="breadcrumbs" id="breadcrumbs">
        <script type="text/javascript">
            try {
                ace.settings.check('breadcrumbs', 'fixed')
            } catch (e) {
            }
        </script>

        <ul class="breadcrumb">
            <li>
                <i class="icon-home home-icon"></i>
                <a href="backstage/home">主页</a>
            </li>

            <li class="active">
                <a href="backstage/types/list">主题列表</a>
            </li>
            <li>
                添加主题
            </li>
        </ul><!-- .breadcrumb -->
    </div>

    <div class="page-content">
        <div class="row">
            <div class="col-xs-12">
                <!-- PAGE CONTENT BEGINS -->
                <div class="page-header">
                    <h1>
                        添加主题
                    </h1>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="tabbable">
                            <ul class="nav nav-tabs padding-18 tab-size-bigger" id="myTab">
                                <li class="active">
                                    <a data-toggle="tab" href="#faq-tab-1">
                                        <i class="blue icon-edit bigger-120"></i>
                                        通用信息
                                    </a>
                                </li>
                                <li>
                                    <a data-toggle="tab" href="#faq-tab-2">
                                        <i class="green icon-edit bigger-120"></i>
                                        添加产品
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <form id="myform" class="form-horizontal" role="form" action="backstage/types/add" method="post"
                              enctype="multipart/form-data">
                            <input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">

                            <div class="tab-content no-border padding-24">
                                <div id="faq-tab-1" class="tab-pane fade in active">
                                    <div class="form-group product_form {{$errors->first('type_name')!=""?'has-error':''}}">
                                        <label class="col-sm-4 control-label no-padding-right"> 主题名称 </label>

                                        <div class="col-sm-4">
                                            <input type="text" name="type_name" value="{{old('type_name')}}"
                                                   id="type_name" placeholder="主题名称"
                                                   class="width-100">
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="help-block col-xs-12 col-sm-reset inline">{{$errors->first('type_name')}} </div>
                                        </div>
                                    </div>
                                    <div class="space-4"></div>
                                    <div class="form-group {{$errors->first('type_image')!=""?'has-error':''}}">
                                        <label class="col-sm-4 control-label no-padding-right">
                                            预览图 </label>

                                        <div class="col-sm-4">
                                            <input type="file" id="type_image" name="type_image"
                                                   placeholder="预览图">
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="help-block col-xs-12 col-sm-reset inline">{{$errors->first('type_image')}}</div>
                                        </div>
                                    </div>
                                    <div class="space-4"></div>
                                    <div class="form-group {{$errors->first('is_features')!=""?'has-error':''}}">
                                        <label class="col-sm-4 control-label no-padding-right">类型</label>

                                        <div class="col-sm-4">
                                            <select name="is_features">
                                                <option value="0" @if(old('is_features') == 0) selected @endif>主题
                                                </option>
                                                <option value="1" @if(old('is_features') == 1) selected @endif>功能按钮
                                                </option>
                                            </select>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="help-block col-xs-12 col-sm-reset inline"> {{$errors->first('is_features')}}</div>
                                        </div>
                                    </div>
                                    <div class="space-4"></div>
                                    <div class="form-group {{$errors->first('app_id')!=""?'has-error':''}}"
                                         style="display: none;">
                                        <label class="col-sm-4 control-label no-padding-right">关联模块</label>

                                        <div class="col-sm-4">
                                            <select name="app_id">
                                                <option value="3" selected>产品模块</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="help-block col-xs-12 col-sm-reset inline"> {{$errors->first('app_id')}}</div>
                                        </div>
                                    </div>
                                    <div class="space-4"></div>
                                    <div class="form-group  {{$errors->first('is_ahow')!=""?'has-error':''}}">
                                        <label class="col-sm-4 control-label no-padding-right" for="form-field-1">
                                            是否显示</label>

                                        <div class="col-sm-4">
                                            <input type="radio" name="is_show" value="0" id="hide"> <label
                                                    for="hide">否</label> <input type="radio" name="is_show" checked
                                                                                value="1" id="show"> <label
                                                    for="show">是</label>
                                        </div>
                                        <div class="col-sm-4">
                                            <div class="help-block col-xs-12 col-sm-reset inline"> {{$errors->first('is_ahow')}}</div>
                                        </div>
                                    </div>
                                    <div class="space-4"></div>
                                </div>
                                <div id="faq-tab-2" class="tab-pane fade">
                                    <div class="col-sm-12">
                                        <select name="user_type" id="user_type">
                                            <option value="0">全部</option>
                                            <option value="1">设计师</option>
                                            <option value="2">品牌商</option>
                                        </select>
                                        <select name="brand_id" id="brand_id">
                                            <option value="0">全部</option>
                                            @foreach($brands as $brand)
                                                <option value="{{$brand->brand_id}}">{{$brand->brand_name}}</option>
                                            @endforeach
                                        </select>
                                        <select name="is_shelves" id="is_shelves">
                                            <option value="-1">全部</option>
                                            <option value="1">上架</option>
                                            <option value="0">下架</option>
                                        </select>
                                        <input type="text" class="keyword1" name="user_param" placeholder="用户昵称/手机号">
                                        <input type="text" class="keyword" name="product_id" placeholder="产品ID">
                                        <input type="button" value=" 搜索 " class="button_search">
                                    </div>
                                    <div class="table-responsive">

                                    </div>
                                </div>
                            </div>
                            <div class="clearfix form-actions">
                                <div class="col-md-offset-5 col-md-7">
                                    <button class="btn btn-info" type="submit">
                                        <i class="icon-ok bigger-110"></i>
                                        保存
                                    </button>

                                    &nbsp; &nbsp; &nbsp;
                                    <button class="btn" type="reset">
                                        <i class="icon-undo bigger-110"></i>
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div><!-- /.col -->
                </div>
                <!-- PAGE CONTENT ENDS -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.page-content -->
@stop
@section('script')
    <script type="text/javascript" src="backstage/js/handlebars-v4.0.5.js"></script>
    <script type="text/javascript" src="backstage/js/map.js"></script>
    <script id="product-list-template" type="text/x-handlebars-template">
        <table id="sample-table-1" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th class="center">
                    <label>
                        <input type="checkbox" class="ace">
                        <span class="lbl"></span>
                    </label>
                </th>
                <th>产品编号</th>
                <th>产品预览图</th>
            </tr>
            </thead>

            <tbody>
            @{{#each productList}}
            <tr>
                <td class="center">
                    <label>
                        <input type="checkbox" class="ace" name="product_ids[]" value="@{{product_id}}">
                        <span class="lbl"></span>
                    </label>
                </td>
                <td>@{{product_id}}</td>
                <td>
                    <img src="@{{ thumbnail_image }}" style="width: 120px;"/>
                </td>
            </tr>
            @{{/each}}
            </tbody>
        </table>
    </script>
    <script type="text/javascript">
        var _token = '{{csrf_token()}}';
        $(function () {
            $('#type_image').ace_file_input({
                no_file: '还未选择图片',
                btn_choose: '选择',
                btn_change: '重新选择',
                droppable: false,
                onchange: null,
                thumbnail: true
            });
            $('[data-rel=tooltip]').tooltip();
            $('table th input:checkbox').on('click' , function(){
                var that = this;
                $(this).closest('table').find('tr > td:first-child input:checkbox')
                        .each(function(){
                            this.checked = that.checked;
                            $(this).closest('tr').toggleClass('selected');
                        });

            });
            $(".button_search").click(function(){
                var user_type = $("#user_type option:selected").val();
                var brand_id = $("#brand_id option:selected").val();
                var is_shelves = $("#is_shelves option:selected").val();
                var user_param = $(".keyword1").val();
                var product_id = $(".keyword").val();
                search(user_type,brand_id,is_shelves,user_param,product_id)
            });

        });

        function search(user_type,brand_id,is_shelves,user_param,product_id){
            var source = $("#product-list-template").html();
            var template = Handlebars.compile(source);
            $.post("backstage/types/search", {
                user_type: user_type,
                brand_id: brand_id,
                is_shelves:is_shelves,
                user_param:user_param,
                product_id:product_id,
                _token: _token
            }, function (data, status) {
                if(data.state != 'M00000'){
                    alert(data.message);
                    $(".table-responsive").empty();
                }else{
                    var context = {productList: data.result};
                    var html = template(context);
                    $(".table-responsive").empty();
                    $(".table-responsive").append(html);
                }

            });
        }
    </script>
@stop